<template>
  <div class="list">
    <router-link v-for="(item, index) in list" :key="index"
      :to="'/m/detail/'+item.id" tag="div" class="item">
      <img :src="item.images.medium" class="cover">
      <span class="title">{{item.title}}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'movie-list',
  props: ['list']
}
</script>

<style lang="less" scoped>
  .list {
    margin-left: -5px;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100px;
      height: 200px;
      margin: 0 5px;
      float: left;
      cursor: pointer;

      .title {
        font-size: 15px;
      }

      .cover {
        width: 100px;
        height: 140px;
      }
    }
  }
</style>
